<template>
    <div>
        <el-select :teleported="false" placeholder="请选择" v-bind="$attrs" @focus="onFocus" clearable filterable :multiple="false"  collapse-tags
            collapse-tags-tooltip :max-collapse-tags="3" style="width: 100%">
            <el-option v-for="item in data.options" :key="item[props.value]" :label="item[props.label]" 
                :value="item[props.value]" />
        </el-select>
    </div>
</template>
<script setup>
import { h, ref, reactive, toRefs, watchEffect, computed, watch, onUpdated, onBeforeUpdate, onBeforeMount, onMounted } from "vue";
const props = defineProps({
    params: {
        type: Object,
        default: function () {
            return {}
        }
    },
    auto: [Boolean],
    url: String,
    label: {
        type: String,
        default: function () {
            return "label"
        }
    },
    value: {
        type: String,
        default: function () {
            return "value"
        }
    },
});
const data = reactive({ options: [] });

onMounted(() => {
    if (props.auto) {
        getDate();
    }
});

const getDate = function () {
    klcs.get({ url: props.url, params: props.params })
        .then((response) => {
            data.options = response.data;
        });
}
const onFocus = function () {
    getDate();
}
</script>
<style lang="less" scoped></style>